<template>
  <div>
    <span @click="startUpload">上传图片</span>
    <input type="file" name="file" class="inputfile" ref="file" @change="chooseFile" >
  </div>
</template>


<script>
import { reactive,toRefs,computed,ref } from "vue"
import {useStore} from "vuex"
import {ajax} from "@/api"
export default {
  emits:["getpicpath","chooseFile"],
  setup(props,{emit}){
    const file = ref()
    const state = reactive({
      picpath:""
    })
    const chooseFile = async ()=>{
      var filedata = file.value.files[0] // 需要上传的文件
      var data = new FormData() // 新建表单模型对象 提交数据
      data.append("file",filedata)
      //上传文件
      let {result,code,path} = await ajax.uploadpicfile(data)
      state.picpath = path
      emit("getpicpath",state.picpath)
    }
    const startUpload = ()=>{
      file.value.click()
    }

    return{
      ...toRefs(state),
      chooseFile,
      startUpload,
      file
    }
  }
}
</script>

<style lang="scss" scoped>
.inputfile{
  position: absolute;
  left: -10px;
  top: 8px;
  display: none;
}
</style>
